<template>
<div v-cloak class="topContent order-trail">
    <div v-for="(item, i) in data.orderTrailInfo"  class="item"  v-bind:class="{'onState': i==0}">
        <span class="dot"></span>
        <p v-if="item.serialStatus==005" class="info">苏鲜生已为您发货，快递员{{ item.operator }}正在送货，请耐心等待哦，联系电话：<a :href="'tel:' + item.courierTel">{{ item.courierTel }}</a></p>
        <p v-else class="info">{{ item.serialDesc }}</p>
        <span>{{ item.createTime }}</span>
    </div>
</div>
</template>

<script>
import fetch from '../../config/fetch';
import * as domains from '../../config/env';
import * as Util from '../../config/utils';

export default {
    data () {
        return {
            orderid: this.$route.params.orderid,
            data: {
                
            }
        }
    },
    mounted () {
        this.getOrderTrail();
    },
    methods: {
        getOrderTrail() {
            var that = this;
            $.ajax({
                url: domains.tps + '/app/orderCenter/showOrderTrail.do',
                data: {
                    orderId: this.orderid
                },
                dataType: 'jsonp',
                jsonp: 'callBack',
                jsonpCallback: 'getOrderTrail',
                success: function(res){
                    if (res && res.data) {
                        that.data = res.data;
                        that.$nextTick(function() {
                            that.getLine();
                        });
                    }
                },
                error: function(xhr, type){
                    AlertBox({type: "mini", msg: "网络异常，请稍后再试"});
                }
            })
        },

        getLine: function(){
            var $topContent = $('.topContent');
            $('.item').each(function(index, el) {
                if(index == 0)return;
                var $this = $(this).find('.dot'),
                    $prev = $(this).prev().find('.dot'),
                pTop = $prev.offset().top,
                    tTop = $this.offset().top,
                    //线条高度
                    top = pTop + $prev.height(),
                    h = tTop - top-1;

                var $line = $('<div></div>');
                $line.css({
                    width: '1px',
                    background: '#dddddd',
                    position:'absolute',
                    zIndex:'99',
                    top: (top - $topContent.offset().top)+'px',
                    height:h+'px',
                    left:'1.16rem',
                });

                $topContent.append($line);
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import "./style";
</style>
